<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      [v-cloak]{
        opacity: 0;
      }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <h1 v-once>{{name}}</h1>
        <h2 :class='clnObj' :style="sty">{{name}}</h2>
        <input type="text" v-model='name'>

        <h2 v-if='name.length < 10'>{{name}}</h2>
        <!-- <span></span> -->
        <h2 v-else-if='false'>内容太长了 不展示了</h2>
        <h2 v-else>内容太长了 不展示了</h2>

        <h2 v-show='name.length < 10'>{{name}}</h2>
        <h2 v-show='name.length >= 10'>内容太长了 不展示了</h2>

        <!--
          item 是数组中的每一项 index是对应的索引； 这两个变量自己定义的 
          这两个变量 只能在当前标签上 及其子元素上使用
        -->
        <h3 v-for='(item,index) in  ary' :key='index'>
          {{item}}:{{index}}
          <span v-for='val in 3'>{{item}}</span>
        </h3>
        <!-- {{item}} -->
        <img v-bind:src="url" alt="">        
        <img :src="url" alt="" :class='cln'>

        <div :class="{box:0,box2:1,box3:1}" :style="{height:'30px'}"></div>
        <div :class="['box1','box2','box3','box1']"></div>

        <ul v-pre>
          <li>{{name}}</li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
    </div>
</body>
</html>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            name:"珠峰",
            cln:'box',
            clnObj:{'qqq':1},
            sty:{color:'red'},
            url:'http://e.hiphotos.baidu.com/zhidao/pic/item/b64543a98226cffc7a951157b8014a90f703ea9c.jpg',
            ary:[100,200,300,400,500]
        }
    });
    /* 
      v-model='xxx'
      v-html='xxx'
      v-text='xxx'

      v-cloak  专门用来提供 解决小胡子的显示问题;需要配合css使用
               当VUE 编译完成之后 会把这个属性删掉 着我们css属性就不再起作用了
      v-once   有这个指令的标签 只会编译一次；  
      v-pre    有这个指令的标签及其后代元素 vue都不再编译;可以用来提升VUE的编译效率

      v-if    v-else-if v-else 用来控制元素或者组件是否加载 有比较大的切换开销
      v-show   用来控制 元素胡总和组件是否显示  有比较大的初始加载开销

      v-for   用来循环的 可以循环数组 数字 字符串  对象；
              与v-if同时使用的时候 for的优先级高
              v-for使用时 一般都要加上 :key
              key 对vue来说 是元素的一个身份证，有利于vue的DOM diff计算
              key在同一个for中是不能重复的；

      v-bind  用来处理行内属性的一个指令;简写 ：
              行内属性中 class  和 style 是经常操作的属性
              所以 vue对这两个属性专门做了加强
              :class="{类名1：布尔值，类名2：布尔值，类名3：布尔值}"
              :style="{css属性名：css属性值}"


    */
</script>